Implementación

Cómo se carga

El tema se declara en el <helmet> de cada documento, después de los tokens de Lumina. Todo lo que no se redefine se hereda.

<!-- 1. tokens y styles de Lumina -->
<link rel="stylesheet" href="_ds/lumina-.../styles.css">
<script src="_ds/lumina-.../_ds_bundle.js"></script>

<!-- 2. fuentes NetPay -->
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800
  &family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500" rel="stylesheet">

<!-- 3. override NetPay — SIEMPRE al final -->
<link rel="stylesheet" href="theme/netpay-theme.css">

Paleta

El azul es la superficie, el morado es la acción

La v2 corrige la aplicación, no los pigmentos. En netpay.mx el azul de marca no es un acento escaso: es la banda estructural — nav, encabezados y secciones full-bleed. La acción vive en el morado profundo, en botones tipo píldora. El canvas es blanco azulado, no gris cálido. La regla 60-30-10 se mantiene, pero el 30% de estructura es azul y el 10% de acción es morado.

lb-core#116EF0 · marca

lb-deep#0B4FB5 · pressed

lb-glow#4A8FF7 · hover

lb-ice#E7F0FE · relleno

np-teal#00778F · datos

grape#260059 · acción

deep-green#116EF0 · banda estructural

void#0E1B2E · titulares

pine#4A5C7A · etiquetas

chalk#EFF4FB · canvas

Tipografía

Display sans, no serif

Lumina usa Fraunces y la cursiva como mecanismo de énfasis. NetPay opera en contexto de dinero: el display es Manrope y el énfasis se hace con peso y color, no con cursiva. El cuerpo y el mono se conservan de Lumina.

Display · Manrope 800 Alta y formalización

Cuerpo · DM Sans 300/400 El asesor captura los datos una sola vez y el sistema los propaga al expediente.

Mono · JetBrains Mono RN-25 · CSF > poder > DDC

Componentes

Los mismos de Lumina, con pigmento NetPay

Enviar a formalización

Guardar borrador

Expediente completo

Requiere HITL

Tarjeta destacada 14 validaciones antes de expediente completo

Tarjeta base 26 reglas de negocio documentadas

Tarjeta oscura 7 fases del flujo de alta

Reglas de uso

LogoVersión blanca sobre la banda azul de marca, alto 32-36px, en el encabezado de todo documento. Nunca sobre fondo claro ni recoloreado.

AzulEs la superficie estructural: nav, encabezado y secciones full-bleed. Sobre esa banda el texto es blanco y los secundarios salen de --on-brand-muted, nunca de pine. Sobre superficie clara sigue siendo acento de dato, no texto de cuerpo.

MoradoSolo acción: botones y CTA, en píldora de radio completo. Conserva el morado también sobre banda azul — ese contraste es la firma de la marca. Nunca como fondo de sección ni como texto.

TealSolo para diferenciar datos o categorías dentro de un gráfico o tabla. Nunca para acciones.

Hex literalesNo se escriben. Todo color sale de un token, para que un cambio de marca no obligue a editar cada documento.

CursivaFuera del vocabulario. El énfasis es peso 700 o color de acento.